<template>
  <div class="amoy addressCom">
    <div class="amoy-input-wrapper">
      <div class="amoy-input-head"><p>收件人</p></div>
      <div class="amoy-input-primary">
       <input type="text" placeholder="请输入姓名" v-model="username">
      </div>
    </div>
    <div class="amoy-input-wrapper">
      <div class="amoy-input-head"><p>联系方式</p></div>
      <div class="amoy-input-primary">
        <input type="text" placeholder="请输入联系方式" v-model="mobile">
      </div>
    </div>
    <group>
      <x-address title="所在地区" v-model="cityvalue" :list="addressData"  @on-shadow-change="onShadowChange"></x-address>
    </group>
    <div class="amoy-textarea">
      <p class="amoy-textarea-head">
          详细地址
      </p>
      <textarea name="detail" v-model="detail" cols="6" rows="6" placeholder="请输入详细地址信息"></textarea>
    </div>
    <div @click="consoleFun" class="amoy-btn-big amoy-btn-active">
      <p>新增地址</p>
    </div>
  </div>
</template>
<style scoped>

</style>
<script>
  import { Group, XInput, XAddress, ChinaAddressV4Data } from 'vux'
  export default {
    name: 'addressCom',
    components: {
      Group,
      XInput,
      XAddress
    },
    props: {
      dName: {
        type: String,
        default: ''
      },
      dMobile: {
        type: String,
        default: ''
      },
      dDetail: {
        type: String,
        default: ''
      },
      dCity: {
        type: Object,
        default: () => {
          return   {
            code: ["110000", "110100", "110101"],
            name: ["北京市", "市辖区", "东城区"]
          }
        }
      },
    },
    data () {
      return {
        cityvalue: this.dCity.code,
        addressData: ChinaAddressV4Data,
        username: this.dName,
        mobile: this.dMobile,
        detail: this.dDetail,
        cityname: this.dCity.name
      }
    },
    methods: {
      onShadowChange (ids, names) {
        this.cityStr = names
      },
      consoleFun () {
        let data = {
          name: this.username,
          phone: this.mobile,
          detail: this.detail,
          citycode: this.cityvalue,
          cityname: this.cityname
        }
        this.$emit('on-value', data)
      }
    }
  }
</script>
<style scoped>
</style>
